<template>
  <div>
    <!-- 
      v-model 这个指令可以实现表单控件中数据与视图的双向绑定
      1. 数据改变 => 视图自动同步
      2. 视图改变 => 数据自动同步
    -->

    <!-- 1. <input type="text"> 将value属性替换成v-model-->
    <input type="text" v-model="inputValue">
    <hr>

    <!-- 2. 下拉选择框 Select 将name属性替换成v-model -->
    <select v-model="city">
      <option value="成都">成都</option>
      <option value="上海">上海</option>
      <option value="北京">北京</option>
      <option value="深圳">深圳</option>
    </select>
    <hr>

    <!-- 3. 单选框 将name属性替换成v-model -->
    <input type="radio" value="男" v-model="sex">男
    <input type="radio" value="女" v-model="sex">女
    <hr>
    
    <!-- 4. 复选框
            将name属性替换成v-model => v-model中绑定一个数组，选中项就是数组中的每一个元素
            将name属性替换成v-model => v-model中绑定一个非数组，当切换选择状态时会以布尔值的形式来做切换的转态
    -->
    <input type="checkbox" value="唱" v-model="hobby">唱
    <input type="checkbox" value="跳" v-model="hobby">跳
    <input type="checkbox" value="rap" v-model="hobby">rap
    <hr>
    <input type="checkbox" value="唱" v-model="hobby1">唱
    <input type="checkbox" value="跳" v-model="hobby2">跳
    <input type="checkbox" value="rap" v-model="hobby3">rap
    <hr>

    <!-- 5. 文本域 将双标签里面的内容 替换成 标签内的 v-model指令-->
    <textarea v-model="tt"></textarea>
  </div>
</template>

<script>
    export default {
      name: 'DemoIndex4',
      data() {
        return {
          inputValue: '123',
          city: '',
          sex: '',
          hobby: [],

          hobby1: '',
          hobby2: false,
          hobby3: 0,

          tt: '请输入内容'
        }
      },
    }
</script>

<style scoped>

</style>